<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="renderer" content="webkit|ie-comp|ie-stand">
		<title>sku</title>
		<link rel="stylesheet" type="text/css" href="sku/css/index.css" />
		<!--bootstrap-->
		<link href="css/bootstrap.css" rel="stylesheet">
	    <link href="css/selfcommon.css" rel="stylesheet">
	    <link href="css/site.css" rel="stylesheet">
	    <link href="css/bootstrap-responsive.css" rel="stylesheet">
        <link href="css/uploadprettify.css" rel="stylesheet">
	    <!--bootstrap_end-->
	</head>
	<body style="padding-top:0px;">
		<div id="app" v-cloak>
            <div class="form-group field-cid required">
                <div class="control-group">
                    <label class="control-label" for="cid">所属分类</label>
                    <div class="controls">
                        <select id="cid" class="input-xlarge span11 ls-put" v-model="cid">
                            <option value="0">请选择所属分类</option>
                        </select>
                        <span>
                          <p class="help-block help-block-error"></p>
                        </span>
                    </div>
                </div>
            </div>
            <div class="form-group field-cid required">
                <div class="control-group">
                    <label class="control-label" for="cid">所属品牌</label>
                    <div class="controls">
                        <select id="cid" class="input-xlarge span11 ls-put" v-model="bid">
                            <option value="0">请选择所属品牌</option>
                        </select>
                        <span>
                          <p class="help-block help-block-error"></p>
                        </span>
                    </div>
                </div>
            </div>
            <div class="form-group field-title required">
                <div class="control-group">
                    <label class="control-label" for="title">商品名称</label>
                    <div class="controls">
                        <input type="text" id="title" class="input-xlarge span11 ls-put" v-model="title" placeholder="请输入商品名称..." aria-required="true">
                        <span>
                          <p class="help-block help-block-error"></p>
                        </span>
                    </div>
                </div>
            </div>
            <div class="form-group field-mydatepicker required">
                <div class="control-group">
                    <label class="control-label" for="mydatepicker">上架时间</label>
                    <div class="controls">
                        <input type="date" class="input-xlarge span11 ls-put" v-model="addtime" placeholder="" aria-required="true">
                        <span>
                          <p class="help-block help-block-error"></p>
                        </span>
                    </div>
                </div>
            </div>
            <div class="form-group field-mydatepicker required">
                <div class="control-group">
                    <label class="control-label" for="mydatepicker">原价</label>
                    <div class="controls">
                        <input type="text" class="input-xlarge span11 ls-put" v-model="oldprice" placeholder="" aria-required="true">
                        <span>
                          <p class="help-block help-block-error"></p>
                        </span>
                    </div>
                </div>
            </div>
            <div class="form-group field-mydatepicker required">
                <div class="control-group">
                    <label class="control-label" for="mydatepicker">现价</label>
                    <div class="controls">
                        <input type="text" class="input-xlarge span11 ls-put" v-model="price" placeholder="" aria-required="true">
                        <span>
                          <p class="help-block help-block-error"></p>
                        </span>
                    </div>
                </div>
            </div>
            <div class="form-group field-mydatepicker required">
                <div class="control-group">
                    <label class="control-label" for="mydatepicker">库存</label>
                    <div class="controls">
                        <input type="text" class="input-xlarge span11 ls-put" v-model="gnum" placeholder="" aria-required="true">
                        <span>
                          <p class="help-block help-block-error"></p>
                        </span>
                    </div>
                </div>
            </div>            
            <div class="form-group field-color required">
                <div class="specification">
                    <ul class="spec-list" v-if="specification&&specification.length>0">
                        <li class="item" v-for="(item, index) in specification" :key="index">
                            <div class="name">
                                <input class="input" v-model="item.name" placeholder="输入产品规格" />
                                <span class="deleteIcon" @click="delSpec(index)">×</span>
                            </div>
                            <div class="values">
                                <span class="tag" v-for="(tag, num) in item.value" :key="tag">
                                    <span>{{tag}}</span>
                                    <span class="closeIcon" @click="delSpecTag(index, num)">×</span>
                                </span>
                                <div class="add-attr">
                                    <input class='input addSku' v-model="addValues[index]" placeholder="多个属性以空格隔开" @keyup.enter="addSpecTag(index)"
                                     @blur.prevent="addSpecTag(index)" />
                                    <span class="addIcon" @click="addSpecTag(index)" style="top:6px;">+</span>
                                </div>
                            </div>
                        </li>
                    </ul>
                    <div class="add-spec" style="margin-top:10px;">
                        <button class="addSkuBtn" :disabled="specification.length >= 10" @click="addSpec">添加规格项目<button>
                    </div>
                </div>
                <div class="example">
                    <table class="stock-table" cellspacing="0" cellpadding="0">
                        <thead>
                            <tr>
                                <th v-for="(item, index) in specification" :key="index">
                                    {{item.name}}
                                </th>
                                <th>价格</th>
                                <th>库存</th>
                            </tr>
                        </thead>
                        <tbody v-if="specification[0] && specification[0].value.length">
                            <tr :key="index" v-for="(item, index) in countSum(0)">
                                <td v-for="(n, specIndex) in specification.length" v-if="showTd(specIndex, index)" :key="n" :rowspan="countSum(n)">
                                    {{getSpecAttr(specIndex, index)}}
                                </td>

                                <td>
                                    <input class="input priceInput"   type="text" v-model.number="productArray[index].productPrice"
                                     placeholder="输入价格" />
                                </td>
                                <td style="justify-content: center;display: flex; align-items: center;padding: 4px 10px;height: 41px;">
                                    <div >
                                        <input class="input stockInput" type="text" v-model.number="productArray[index].productStock"
                                         placeholder="上传图片"  />
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div id="div_1" style="margin-top: 20px; display: none;">
                    <h3>规格项目</h3>
                    <pre id="specificationdataData"></pre>
                </div>
                <div id="div_2" style="margin-top: 20px; display: none;">
                    <h3>属性阵列</h3>
                    <pre id="productArrayData"></pre>
                </div>                               
            </div>
			<div class="form-group field-intro required">
                <div class="control-group">
                    <label class="control-label" for="intro">描述</label>
                    <div class="controls">
                        <textarea id="intro" class="input-xlarge span11 ls-put" v-model="descr" rows="3" placeholder="请输入简单描述..." aria-required="true"></textarea>
                        <span>
                          <p class="help-block help-block-error"></p>
                        </span>
                    </div>
                </div>
            </div>
            <div class="form-group field-color required">
                <div class="control-group">
                    <label class="control-label" for="file"></label>
                    <div class="controls">
                        <a href="javascript:;" class="file">封面图
                            <input type="file" id="upload">
                        </a>
                    </div>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="url"></label>
                <div class="controls">
                    <div class="s-pic" style="border:1px dashed #ccc;width:360px;height:120px;">
                        <img src="/" width="320px" height="100px" style="margin:10px auto;display:block;" id="previw">
                    </div>                      
                </div>
            </div>
            <div class="form-group field-color required">
                <div class="control-group">
                    <label class="control-label" for="color"></label>
                    <div class="controls">
                        <div class="layui-upload">
                            <button type="button" class="layui-btn" id="gallery">上传相册</button>
                            <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;width: 88%">
                                预览：
                                <div class="layui-upload-list uploader-list" style="overflow: auto;" id="uploader-list"></div>
                            </blockquote>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group field-content required">
                <div class="control-group">
                    <label class="control-label" for="content">商品详情</label>
                    <div class="controls">
                        <textarea id="gcontent" name="gdetail" class="input-xlarge span11 ls-put" rows="3" style="margin-left:0px!important;" v-model="gdetail"></textarea>
                        <span>
                          <p class="help-block help-block-error"></p>
                        </span>
                    </div>
                </div>
            </div>
            <div class="form-group field-content required" style="clear:both;">
                <button type="submit" class="ell-btn addSkuBtn" @click='submit' name="login-button" style="margin-top:30px;">立即创建</button>
            </div>
		</div>
	<script src="js/jquery-2.1.4.min.js"></script>
    <script src="sku/js/vue.min.js"></script>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="layui/css/ugallery.css">
    <script src="layui/layui.js"></script>
    <script type="text/javascript">
        $(document).on('change', '#upload', function () {
           let formData = new FormData();
           formData.append("imgFile", $("#upload")[0].files[0]);
           formData.append("_csrf","");
           let str="";
           $.ajax({
               url : "",
               type : "POST",
               data : formData,
               processData : false,
               contentType : false,
               beforeSend: function () {
                   //可以做一些正在上传的效果
               },
               success : function(data) {
                    if(data.status)
                    {
                        $('#previw').attr('src',data.url);
                        $('.s-url').val(data.url);
                    }
               },
               error : function(responseStr) {
                   console.log(responseStr);
               }
           });
        }) 
    </script>
    <script type="text/javascript">
        let layedit=null;
        let gindex=null;
        let gdetail="";
        layui.use(['upload', 'layedit'], function(){
          layedit = layui.layedit;
            layedit.set({
                height:300,
                uploadImage: {
                    url: "{:url('Publics/uploadImg')}",
                    type: "post"
                }
            });
            gindex = layedit.build('gcontent');
            gdetail = layedit.getContent(gindex);
            console.log(gdetail);
            //多图上传
            let upload = layui.upload;
            let layer = layui.layer;
            upload.render({
                elem: '#gallery'
                ,url: ''
                ,multiple: true
                ,before: function(obj){
                    layer.msg('图片上传中...', {
                        icon: 16,
                        shade: 0.01,
                        time: 0
                    })
                }
                ,done: function(res){
                    layer.close(layer.msg());//关闭上传提示窗口
                    //上传完毕
                    $('#uploader-list').append(
                        '<div id="" class="file-iteme">' +
                        '<div class="handle"><i class="layui-icon layui-icon-delete"></i></div>' +
                        '<img style="width: 100px;height: 100px;" src='+ res.data.src +'>' +
                        '<div class="info">' + res.data.title + '</div>' +
                        '</div>'
                    );
                }
            });   
        });

    </script>
    <script src="sku/js/index.js"></script> 
	</body>
</html>
